import './OptionsTemp.scss'
import { Pagination, App } from 'antd';
import { useState, useEffect } from 'react';
import { ColorCallBack, strOfurlParamsFunc, SpacingCallBack, getNestedValue } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'

const OptionsTempA03 = ({ config, apiData, TempEvent }) => {
    const { message } = App.useApp()
    const configuration = config || LayoutDeftula.Options03
    const { urlList, data_apiName, data_dataLevel, data_dataSize, params, value, showTotal } = configuration

    const [Total, setTotal] = useState(0)
    const [Current, setCurrent] = useState(value)
    const [PageSize, setPageSize] = useState(6)

    const totalStyle = {
        '--totalFill': ColorCallBack(configuration.total_fill, configuration.total_deg),
        '--totalFontSize': configuration.total_fontSize + 'px',
        '--totalFontFamily': configuration.total_fontFamily,
        '--totalFontWeight': configuration.total_fontWeight,
        '--totalFontStyle': configuration.total_fontStyle,
        '--totalFilter': `drop-shadow(${configuration.total_shadowX}px ${configuration.total_shadowY}px ${configuration.total_shadowS}px ${configuration.total_shadowC})`,

        '--pnSize': configuration.pnSize + 'px',
        '--pnColor': configuration.pnColor,
        '--size': configuration.itemSize + 'px',
        '--itemBack': ColorCallBack(configuration.itemBack, configuration.itemDeg),
        '--itemRadius': configuration.itemRadius + 'px',
        '--itemBorder': `${configuration.itemBorder}px ${configuration.itemType} ${configuration.itemColor}`,
        '--itemFill': ColorCallBack(configuration.item_fill, configuration.item_deg),
        '--itemFontSize': configuration.item_fontSize + 'px',
        '--itemFontFamily': configuration.item_fontFamily,
        '--itemFontWeight': configuration.item_fontWeight,
        '--itemFontStyle': configuration.item_fontStyle,
        '--itemFilter': `drop-shadow(${configuration.item_shadowX}px ${configuration.item_shadowY}px ${configuration.item_shadowS}px ${configuration.item_shadowC})`,

        '--activeBack': ColorCallBack(configuration.activeBack, configuration.itemDeg),
        '--activeFill': ColorCallBack(configuration.activefill, configuration.item_deg),
    }

    const onClick = (e) => {
        if (params) TempEvent.emit({ type: 'onOptionsSwitch', data: { params: { [params]: encodeURIComponent(e) }, urlList } })
        else message.info({ content: '未设置发送参数!', key: 'OptionsTempA02' })
        setCurrent(e)
    }


    useEffect(() => {
        if (apiData?.length !== 0 && data_apiName && data_dataLevel) {
            const [urlList] = apiData.filter(v => v.name === data_apiName)
            const total = getNestedValue(data_dataLevel, urlList)
            const size = getNestedValue(data_dataSize, urlList)
            setTotal(total || 0)
            setPageSize(size)
        }
    }, [config, apiData])

    return (
        <div className='OptionsTempA03' style={totalStyle}>
            <Pagination
                showTotal={(total, range) => showTotal ? `当前 ${range[0]}-${range[1] || 0} , 总计 ${total} 条` : ''}
                current={Number(Current)}
                total={Total}
                pageSize={PageSize}
                showSizeChanger={false}
                onChange={onClick}
            />
        </div>
    );
};

export default OptionsTempA03;